﻿@{
    Layout = null;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>苏迈克斯协同办公系统</title>
    <!--通用代码块开始-->
    <link href="@Url.Content("~/Content/ExtJS/resources/css/ext-all.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Content/ExtJS/bootstrap.js")" type="text/javascript"></script>
    <!-- portal classes -->
    <script type="text/javascript" src="@Url.Content("~/Content/ExtJS/classes/Portlet.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/ExtJS/classes/PortalColumn.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/ExtJS/classes/PortalPanel.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/ExtJS/classes/PortalDropZone.js")"></script>
    <!-- example portlets -->
    <script type="text/javascript" src="@Url.Content("~/Content/ExtJS/classes/GridPortlet.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/ExtJS/classes/ChartPortlet.js")"></script>
    <!-- app -->
    <script src="@Url.Content("~/Content/javascript/common.js")" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/ExtJS/classes/portal.css")"/>
    <script type="text/javascript">
        LayoutEngine = function (config) {
            var portalpanel = Ext.getCmp('app-portal');
            for (var column in config) {
                // 创建列
                var p = Ext.create('Ext.container.Container', { flex: 1, padding: 4 });
                portalpanel.add(p);
                for (var item in config[column]) {
                    // 创建组件,并向列中添加该组件
                    var type = config[column][item].type;
                    //var params = config[column][item].params;
                   //var height = config[column][item].height;
                    //debugger;
                    p.add(Ext.create(type,config[column][item]/* { params: params ,height: height }*/));
                }
            }
            portalpanel.doLayout();
        };

        Ext.define("textPanel", {
            extend: 'Ext.panel.Panel',
            frame: true,
            //tools: this.getTools,
            closable: true,
            resizable: true,
            draggable: true,
            params: { title: '', url: '' },
            cls: 'x-portlet',
            initComponent: function () {
                this.title = this.params.title;
                this.html = this.params.url;
                this.callParent(arguments);
            }
        }
            );

        Ext.define("remind", {
            extend: 'Ext.grid.Panel',
            title: '我的提醒',
            height: 160,
            closable: true,
            resizable: true,
            store: new Ext.data.Store({
                fields: ['Title', 'Sender', 'SendDate', 'ID'],
                proxy: {
                    type: 'ajax',
                    url: '/data/info',
                    extraParams: { type: 'remind' }, //传参数,在Request.Params["mrId"]
                    reader: {
                        type: 'json',
                        root: 'data'
                    }
                },
                autoLoad: true
            }),
            draggable: true,
            cls: 'x-portlet',
            frame: true,
            columns: [
                        { header: '标题', dataIndex: 'Title', flex: 1,
                            renderer: function (val, meta, record) { return '<a href="javascript:msgShow(\'' + record.data.ID + '\')">' + val + '</a>'; }
                        },
                            { header: '发件人', width: 70, dataIndex: 'Sender' },
                        { header: '日期', width: 100, dataIndex: 'SendDate' }
                    ],
            listeners: {
                'close': function () { } //Ext.bind(this.onPortletClose, this)
            },
            initComponent: function () {
//                this.title = this.params.title;
//                this.html = this.params.url;
                this.callParent(arguments);
            }
        }
    );

        Ext.define("msgUnread", {
            extend: 'Ext.grid.Panel',
            title: '我的未读消息',
            height: 160,
            closable: true,
            resizable: true,
            store: new Ext.data.Store({
                fields: ['Title', 'Sender', 'SendDate', 'ID'],
                proxy: {
                    type: 'ajax',
                    url: '/data/info',
                    extraParams: { type: 'unread' }, //传参数,在Request.Params["mrId"]
                    reader: {
                        type: 'json',
                        root: 'data'
                    }
                },
                autoLoad: true
            }),
            draggable: true,
            cls: 'x-portlet',
            frame: true,
            columns: [
                        { header: '标题', dataIndex: 'Title', flex: 1,
                            renderer: function (val, meta, record) { return '<a href="javascript:msgShow(\'' + record.data.ID + '\')">' + val + '</a>'; }
                        },
                            { header: '发件人', width: 70, dataIndex: 'Sender' },
                        { header: '日期', width: 100, dataIndex: 'SendDate' }
                    ],
            listeners: {
                'close': function () { } //Ext.bind(this.onPortletClose, this)
            },
            initComponent: function () {
//                this.title = this.params.title;
//                this.html = this.params.url;
                this.callParent(arguments);
            }
        }
    );

        Ext.define("RSS", {
            extend: 'Ext.grid.Panel',
            //tools: portalpanel.getTools(),
            height: 300,
            draggable: true,
            cls: 'x-portlet',
            frame: true,
            closable: true,
            resizable: true,
            bodyPadding: 2,
            columns: [
                { header: '标题', dataIndex: 'title', flex: 1,
                    renderer: function (val, meta, record) { return '<a href="' + record.data.link + '" target="_blank" title="' + record.data.description + '">' + val + '</a>'; }
                },
                //{ header: '日期', width: 120, dataIndex: 'pubDate' ,renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')}
                { header: '日期', width: 120, dataIndex: 'pubDate' }
            ],
            listeners: {
                'close': function () { } //Ext.bind(this.onPortletClose, this)
            },
            initComponent: function () {
            //ebugger;
                this.title = this.params.title;
                this.height = this.params.height?this.params.height:this.height;
                this.store = new Ext.data.Store({
                    storeId: Ext.id(),
                    fields: [
                        { name: 'title', type: 'string' },
                        { name: 'link', type: 'string' },
                        //{ name: 'pubDate', type: 'date', dateFormat: 'timestamp' },  //Wed, 4 May 2011 02:20:48 GMT
                        { name: 'pubDate', type: 'string'},
                        { name: 'description', type: 'string' }],
                    proxy: {
                        url: '/data/RSS', 
                        type: 'ajax',
                        extraParams: { rss: this.params.url},
                        reader: {
                            type: 'xml',
                            root: 'rss',
                            record: 'item'
                        }
                    },
                    autoLoad: true
                });
                this.callParent(arguments);
                //debugger;
//                this.getStore().load({ 
//                    params: {} ,
//                    scope: this,
//                    callback: function(records, operation, success) {
//                        debugger;
//                    }
//                    }); //有问题,不同的实例返回相同的数据
            }
        }
    );

        var msgShow = function (id, text) {
            this.parent.addTab('/office/myOffice/MsgShow?id=' + id, '消息:' + text);
            //window.setTimeout(refreshMsg, 3000);
        };

        function addRSSportlet() { //RSS源
            new Ext.window.Window({
                xtype: 'form',
                title: '加载RSS源',
                modal: true,
                closable: true,
                stateful: false,
                //animateTarget: this,
                width: 400,
                height: 200,
                bodyPadding: 10,
                //height: 500,
                layout: 'fit',
                bodyStyle: 'padding: 5px;',
                items: [new Ext.form.FormPanel({
                    layout: {
                        type: 'vbox',
                        align: 'stretch'
                    },
                    width: '100%',
                    items: [
                        { xtype: 'textfield', name: 'title', fieldLabel: '标题' },
                        { xtype: 'textfield', name: 'url', fieldLabel: 'RSS源' }
                    ],
                    buttons: [
                        { text: '确定', handler: function () {
                            var portalpanel = Ext.getCmp('app-portal');
                            portalpanel.items.items[0].insert(0,
                                Ext.create('RSS',{
                                    params:{
                                        title: this.up('form').getForm().getValues().title,
                                        url: this.up('form').getForm().getValues().url
                                        }
                                })
                            );
                            portalpanel.doLayout();
                            this.up('window').close();
                        }
                        },
                        { text: '取消', handler: function () { this.up('window').close(); } }
                    ]
                })]
            }).show();
        };

        var saveLayout = function () {
            var portalpanel = Ext.getCmp('app-portal');
            var layoutData = new Array();
            for (var i = 0; i < portalpanel.items.length; i++) {
                var column = new Array();
                for (var j = 0; j < portalpanel.items.get(i).items.length; j++) {
                    column.push({
                        type: portalpanel.items.get(i).items.get(j).$className,
                        params: portalpanel.items.get(i).items.get(j).params,
                        height: portalpanel.items.get(i).items.get(j).getHeight()/*,
                        width: portalpanel.items.get(i).items.get(j).getWidth()*/
                    });
                }
                layoutData.push(column);
            };
            //debugger;
            Ext.Ajax.request({
                url: '/main/save',
                params: {
                    layoutData: Ext.JSON.encode(layoutData)
                },
                success: function (response) {
                    alert('保存成功');
                }
            });
        };

        Ext.onReady(function () {
                var configData = @Html.Raw(TempData["layoutData"].ToString());
                //debugger;
                Ext.create('Ext.container.Viewport', {
                    id: 'app-viewport',
                    bodyPaddinig: 5,
                    layout: {
                        type: 'fit'
                    },
                    items: [{
                        id: 'app-portal',
                        xtype: 'portalpanel',
                        //region: 'center',
                        tbar: [
                        { xtype: 'button', iconCls: 'iconNew', text: '', tooltip: '本地部件', tooltipType: 'title', 
                            handler: function (source, e) { 
                                Ext.getCmp('app-portal').items.get(0).insert(0,Ext.create('textPanel',{params:{title:'test',url:'testHTML'}}));
                                Ext.getCmp('app-portal').doLayout();
                         } },
                        { xtype: 'button', iconCls: 'iconRSS', text: '', tooltip: 'RSS部件', tooltipType: 'title', 
                            handler: function (source, e) {
                                addRSSportlet();
                        } },
                        { xtype: 'button', iconCls: 'iconEmail', text: '', tooltip: '未读消息', tooltipType: 'title', 
                            handler: function (source, e) { 
                                Ext.getCmp('app-portal').items.get(0).insert(0,Ext.create('msgUnread'));
                                Ext.getCmp('app-portal').doLayout();
                         } },
                        { xtype: 'button', iconCls: 'iconRemind', text: '', tooltip: '我的提醒', tooltipType: 'title', 
                            handler: function (source, e) { 
                                Ext.getCmp('app-portal').items.get(0).insert(0,Ext.create('remind'));
                                Ext.getCmp('app-portal').doLayout();
                         } },
                        { xtype: 'tbseparator' },
                        { xtype: 'tbfill' },
                        { xtype: 'button', iconCls: 'iconSave', text: '', tooltip: '保存', tooltipType: 'title', handler: function (source, e) { saveLayout() } },
                        { xtype: 'button', iconCls: 'iconRefresh', text: '', tooltip: '刷新', tooltipType: 'title', handler: function (source, e) { location.reload(); } }
                    ]
                    }]
                });
                LayoutEngine(configData);
        });
    </script>
</head>
<body>
    <div>
    </div>
</body>
</html>
